<template>
    <div v-transfer-dom>
        <popup v-model="propShow"
               width="100%"
               @on-hide="propHide">
            <header v-if="!single">
                <span @click="affirmFn">确定</span>
            </header>
            <item :theModel="theModel"
                  :selectedPersonFn="selectedPersonFn"></item>
        </popup>
    </div>
</template>
<script>
import { TransferDom, Popup } from 'vux'
import item from './item'
export default {
    name: 'fenBaoUserProp',
    data () {
        return {
            propShow: false,
            theModel: [],
            userInfo: '',
            selectArr: []
        }
    },
    components: {
        Popup,
        item
    },
    directives: {
        TransferDom
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.getData()
    },
    props: {
        selectFenBaoUser: {
            type: Function
        },
        fenBaoUserShow: {
            type: Boolean,
            default: false
        },
        single: {
            default: false
        }
    },
    watch: {
        fenBaoUserShow (newVal) {
            this.propShow = newVal
        }
    },
    methods: {
        getData () {
            let param = {
                'allowPaging': true,
                'business': 'GetDepartUserFenBao',
                'data': this.userInfo.deptid,
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': '',
                'userId': this.userInfo.tokenId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then((res) => {
                this.theModel = res.data.data
                this.$forceUpdate()
            })
        },
        openChild (item) {
            this.$set(item, 'open', !item.open)
        },
        propHide () {
            this.$parent.fenBaoUserShow = false
        },
        selectedPersonFn (item) {
            if (this.single) {
                this.selectFenBaoUser(item)
            } else {
                this.$set(item, 'selected', !item.selected)
                for (let i = 0; i < this.selectArr.length; i++) {
                    if (this.selectArr[i].Id === item.Id) {
                        this.selectArr.splice(i, 1)
                        return false
                    }
                }
                this.selectArr.push(item)
            }
            this.$forceUpdate()
        },
        affirmFn () {
            let SendPersons = ''
            let SendPersonsId = ''
            this.selectArr.forEach(item => {
                if (SendPersons) {
                    SendPersons += `,${item.Name}`
                    SendPersonsId += `,${item.Id}`
                } else {
                    SendPersons += item.Name
                    SendPersonsId += item.Id
                }
            })
            this.selectFenBaoUser(SendPersons, SendPersonsId)
        }
    }
}
</script>
<style scoped>
header {
    display: flex;
    justify-content: flex-end;
    line-height: 40px;
    height: 40px;
    padding: 0 20px;
    background: rgba(0, 0, 0, 0.1);
}
header span {
    font-size: 14px;
    color: cornflowerblue;
}
</style>
